<template>
  <div class="cropper">
    <el-alert
      title="此组件使用了cropperjs，更多用法请参考 https://fengyuanchen.github.io/cropperjs/"
      type="success"
    />
    <div class="com">
      <jxf-cropper ref="cropper" src="img/logo.png"></jxf-cropper>
    </div>
    <div class="btns">
      <el-button type="primary" @click="setAspectRatio"
        >设置裁剪横纵比为1</el-button
      >
      <el-button type="primary" @click="getBase64"
        >获取裁剪后的base64</el-button
      >
      <el-button type="primary" @click="getBlob"
        >获取裁剪后的Blob对象</el-button
      >
      <el-button type="primary" @click="getFile"
        >获取裁剪后的File对象</el-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import jxfCropper from "@/components/jxf/cropper/index.vue";
import { ElMessage } from "element-plus";

const cropper = ref(null);

function setAspectRatio() {
  cropper.value.setAspectRatio(1);
}

async function getBase64() {
  ElMessage.success("内容已经输出到控制台，请查看代码了解详细用法");
  console.log(await cropper.value.getCropData("image/jpeg"));
}

async function getBlob() {
  ElMessage.success("内容已经输出到控制台，请查看代码了解详细用法");
  console.log(await cropper.value.getCropBlob("image/jpeg"));
}

async function getFile() {
  ElMessage.success("内容已经输出到控制台，请查看代码了解详细用法");
  console.log(await cropper.value.getCropFile("fileName.jpg", "image/jpeg"));
}
</script>

<style lang="scss" scoped>
.cropper {
  padding: 10px;
}
.com {
  margin-top: 15px;
}

.btns {
  margin-top: 15px;
}
</style>
